<template>
  <el-button @click="setNode('rect')">矩形</el-button>
  <el-button @click="setNode('circular')">圆</el-button>
  <el-button @click="removeNode()">删除标记</el-button><br />
  <div class="form">
    标记名称：<el-input
      v-model="node.name"
      class="input"
    ></el-input>
  </div>
  <div class="form">
    标记内文字：<el-input
      v-model="nodeText.text"
      class="input"
    ></el-input>
  </div>
  <div class="form">
    文字样式：<el-input
      v-model="nodeText.font"
      class="input"
    ></el-input>
  </div>
  <div class="form">
    允许缩放：<el-switch v-model="node.zoom" />
    允许拖拽<el-switch v-model="node.drag" />
  </div>

  <div id='board'>
    <canvas
      id='drawingBoard'
      class="shadow"
    ></canvas>
  </div>

  <div style="height: 200px;">
    <b>选中的标记信息: </b>
    {{ node }}
  </div>
</template>

<script setup>
import { init, setNode, removeNode } from "@/home/common.js";
import { onMounted, ref } from "vue";

const width = 600;
const height = 400;
const defaultStyle = {
  fillColor: "rgba(255, 255, 255)",
  lineWidth: 5,
};

const node = ref({});
const nodeText = ref({});
let draw = null;
onMounted(() => {
  draw = init(
    { width, height, defaultStyle },
    document.getElementById("drawingBoard"),
    () => {
      node.value = draw.getNode();
      nodeText.value = node.value.textInfo || {};
    }
  );
  draw.addNode({
    type: "circular",
    x: 100,
    y: 240,
    radiusX: 50,
    radiusY: 30,
    level: 1,
    textInfo: {
      text: "标注1",
      fillColor: "rgba(255, 255, 255)",
      font: "20px serif",
    },
  });
  draw.addNode({
    type: "circular",
    drag: false,
    x: 500,
    y: 200,
    radiusX: 50,
    radiusY: 30,
    level: 1,
    textInfo: {
      text: "标注2",
      fillColor: "rgba(255, 255, 255)",
      font: "20px serif",
    },
  });
  draw.addNode({
    type: "image",
    drag: false,
    unClick: true,
    src: new URL("../../../public/R-C.jpg", import.meta.url).href,
    x: 0,
    y: 0,
    width: 600,
    height: 400,
    level: 0,
  });
});
</script>

<style scoped>
#drawingBoard {
  margin-top: 10px;
}
.form {
  align-items: center;
}
.input {
  width: 200px;
}
</style>